<template>
  <div>
    <div class="login">
        <div><img src="../assets/1.png" alt="" style="height:60px;padding:10px"></div>
        <span class="phone" v-if="$store.state.phoneState">{{$store.state.phoneHide}}</span>
        <div class="c1" v-else>
          <span @click="Login">登录</span>
          <span @click="Register">/注册</span>
          <div>开启更多功能</div>
        </div>
        <div class="c2"><img src="../assets/2.png" alt="" @click="personal"></div> 
    </div>

    <div class="list">
      <div class="r1" @click="order">
        <div>我的订单</div>
        <img src="../assets/2.png" alt="">
      </div>
      <div class="r2" @click="address">
        <div>收货地址</div>
        <img src="../assets/2.png" alt="">
      </div>
      <div class="r3" @click="coupon">
        <div>我的优惠券</div>
        <div>0张</div>
        <img src="../assets/2.png" alt="">
      </div>
      <div class="r4" @click="info">
        <div>我在线咨询</div>
        <div>周一至周日09:00-19:00</div>
        <img src="../assets/2.png" alt="">
      </div>
      <div class="r5" @click="service">
        <div>热线客服</div>
        <div>周一至周日09:00-19:00</div>
        <img src="../assets/2.png" alt="">
      </div>
      <div class="r6"@click="setup">
        <div >设置</div>
        <img src="../assets/2.png" alt="">
      </div>
    </div>
  <!-- 底部选项卡 -->
  <van-tabbar
      v-model="active"
      active-color="#222831"
      inactive-color="#bdc1c9"
    >
      <van-tabbar-item name="main">
        <span>首页</span>
        <template #icon="props">
          <img
            :src="props.active ? icon.active : icon.inactive"
            style="height: 27px"
          />
        </template>
      </van-tabbar-item>
      <van-tabbar-item name="book">
        <span>书城</span>
        <template #icon="props">
          <img
            :src="props.active ? icon.active2 : icon.inactive2"
            style="height: 27px"
          />
        </template>
      </van-tabbar-item>
      <van-tabbar-item name="me">
        <span>我的</span>
        <template #icon="props">
          <img
            :src="props.active ? icon.active3 : icon.inactive3"
            style="height: 27px"
          />
        </template>
      </van-tabbar-item>
  </van-tabbar>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: "me",
      icon: {
        active: "/tabbar-logo/home_01.png",
        inactive: "/tabbar-logo/home_02.png",
        active2: "/tabbar-logo/store_01.png",
        inactive2: "/tabbar-logo/store_02.png",
        active3: "/tabbar-logo/mine_01.png",
        inactive3: "/tabbar-logo/mine_02.png",
      }, 
    };
  },
  methods:{
    Login(){
      this.$router.push(`/login`)
    },
    Register(){
      this.$router.push(`/register`)
    },
    setup(){
      this.$router.push(`/setup`)
    },
    personal(){
      if(this.$store.state.phoneState){
          this.$router.push(`/personal`)
      }else{
            this.$router.push(`/login`)
      }
    },
    address(){
       if(this.$store.state.phoneState){
          this.$router.push(`/address`)
      }else{
            this.$router.push(`/login`)
      }
    },
    coupon(){
      if(this.$store.state.phoneState){
          this.$router.push(`/coupon`)
      }else{
            this.$router.push(`/login`)
      }
    },
    info(){
      if(this.$store.state.phoneState){
          this.$router.push(`/client`)
      }else{
            this.$router.push(`/login`)
      }
    },
    order(){
      if(this.$store.state.phoneState){
          this.$router.push(`/nonactivated`)
      }else{
            this.$router.push(`/login`)
      }
    },
    service(){
       if(this.$store.state.phoneState){
          this.$router.push(`/nonactivated`)
      }else{
            this.$router.push(`/login`)
      }
    }
  },
  watch: {
    /** 监听底部选项卡的变化 */
    active(newval) {
      if (newval == "main") {
        this.$router.push("/"); //  路径 / 映射到Home.vue
      } else if (newval == "book") {
        this.$router.push("/books"); // 路径 /book 映射到Book.vue
      } else if (newval == "me") {
        this.$router.push("/me"); // 路径 /me 映射到Me.vue
      }
    }
  },
};
</script>
<style scoped>
.login{ 
    margin-bottom:.1875rem;
    align-items: center;
    display: flex;
    width: 100%;
    box-shadow: 0 .35rem 0.2rem 0 rgb(0 0 0 / 20%);
}
.c1{
  padding: .625rem;
  width: 100%;
  display: flex;
  flex-wrap:wrap
}
.c1 span{
  color: #1E1E1E;
  font-weight: 700;
}
.c1 div{
  /* float: right; */
  display: inline;
}
.phone{
  display: inline-block;
  width:100%;
  color: #222831;
  font-size: 1.575rem;
  margin-left: 0.925rem
}
.c2{
  padding: 2rem;
  width: 100%;
}
.c2 img{
  width: .5rem;
  float: right;
}
.list{
  box-sizing: border-box;
  padding: 0.3125rem 1rem;
  color: #222831;
  font-weight: 700;
  font-size: 0.9375rem;
}
.list div{
  display: flex;
}
.r1{
  height: 3.125rem;
  align-items: center;
  border-bottom: 0.0625rem solid #edeff0;
}
.r1 div{
width: 93%;
}
.r1 img{
width: 0.5rem;
}
.r2{
  height: 3.125rem;
  align-items: center;
  border-bottom: 0.0625rem solid #edeff0;
}
.r2 div{
width: 93%;
}
.r2 img{
  width: 0.5rem;
}
.r3{
height: 3.125rem;
align-items: center;
border-bottom: 0.0625rem solid #edeff0;
}
.r3 div:nth-child(2){
  font-size: .24rem;
  color: #ffaf30;
  padding-left: 13.4375rem;
  padding-right: 0.3125rem;
}
.r3 img{
  width: 0.5rem;
  padding-right: 0.625rem;
}
.r4{
  height: 3.125rem;
  align-items: center;
  border-bottom: 0.0625rem solid #edeff0;
  
}
.r4 div:nth-child(2){
  width: 8.125rem;
  font-size: .24rem;
  color: #c3c7cb;
  margin-left: 6.875rem;
}
.r4 img{
  width: 0.5rem;
  padding-right: 1.125rem;
}
.r5{
  height: 3.125rem;
  align-items: center;
  border-bottom: 0.0625rem solid #edeff0;
  
}
.r5 div:nth-child(2){
  width: 8.125rem;
  font-size: .24rem;
  color: #c3c7cb;
  margin-left: 7.8125rem;
}
.r5 img{
  width: 8px;
  padding-right: 1.125rem;
}
.r6{
  height: 3.125rem;
  align-items: center;
  border-bottom: 0.0625rem solid #edeff0;
}
.r6 div{
width: 93%;
margin-right: 0.625rem
}
.r6 img{
  width: 0.5rem;
  padding-right: 1.125rem;
}

</style>

